<!--
 * @Author: huangtianyang 916072572@qq.com
 * @Date: 2023-04-20 09:52:13
 * @LastEditors: huangtianyang
 * @LastEditTime: 2023-05-25 09:48:05
 * @FilePath: \cxl-h5\src\components\pullUpDialog\Index.vue
-->
<template>
    <section class="pull-up">
        <Transition name="fade" mode="out-in" appear>
            <section class="dialog-container" v-if="modelValue" @click.self="onHide"></section>
        </Transition>
        <Transition name="fade-from-bottom" mode="out-in" appear>
            <section class="dialog-box" v-if="modelValue">
                <section class="title">
                    <h1>{{ title }}</h1>
                    <!-- 关闭按钮 -->
                    <section class="dialog-close" @click.self="onHide"></section>
                </section>
                <!-- 弹窗内容 -->
                <section class="content">
                    <slot name="content"></slot>
                </section>
                <!-- 按钮 -->
                <section class="submit">
                    <slot name="operation"></slot>
                </section>
            </section>
        </Transition>
    </section>
</template>

<script setup lang="ts">
import { watchEffect } from 'vue'
import { ref } from 'vue'
const props = defineProps(['modelValue', 'title'])
const emit = defineEmits(['update:modelValue', 'close'])

//标题
const title = ref('')

const onHide = () => {
    emit('update:modelValue', false)
    emit('close')
}
watchEffect(() => {
    title.value = props.title
})
</script>

<style scoped lang="scss">
.dialog-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 999;
}
.dialog-box {
    position: fixed;
    left: 0;
    bottom: 0;

    z-index: 1000;
    width: 100%;
    border-radius: var(--cxl-size-6) var(--cxl-size-6) 0 0;
    background-color: var(--cxl-color-white);
    box-sizing: border-box;
    padding: var(--cxl-size-16);

    .title {
        display: flex;
        align-items: center;
        justify-content: space-between;
        h1 {
            font-size: var(--cxl-size-20);
            color: var(--cxl-color-333333);
            font-weight: 600;
        }
    }
    .dialog-close {
        width: 2rem;
        height: 2rem;
        position: relative;
        border-radius: 50%;
        border: 2px solid var(--cxl-color-white);

        &::before,
        &::after {
            content: '';
            display: block;
            width: 1rem;
            height: 2px;
            background-color: var(--cxl-color-333333);
            position: absolute;
            top: 50%;
            left: 50%;
        }

        &::before {
            transform: translate(-50%, -50%) rotate(-45deg);
        }

        &::after {
            transform: translate(-50%, -50%) rotate(45deg);
        }
    }
}
</style>
